<template>
	<view class="page">
		<view style="background-color: #FFFFFF;">
		<StatusBar></StatusBar>
		<view class="page-top flex flex-a-center">
			<navigator open-type="navigateBack" class="back"><arrow size="50" color="#000000" direction="left"></arrow></navigator>
			<image class="page-top-head" mode="aspectFit" src="../../../static/icons/agent_jewel/agent_i2.png"></image>
			<text class="page-top-text"></text>
		</view>
		<view class="page-cont">
			<view class="page-cont-top">
				<view class="page-cont-top-title">今日活动量</view>
				<view class="page-cont-top-board flex flex-a-center flex-j-center">
					<view class="page-cont-top-board-item flex flex-a-center flex-j-center">
						<cmd-progress type="circle" :percent="4.33/ 20 * 100" stroke-color="#ffffff" :stroke-width="10" :width="140" :showInfo="false"></cmd-progress>
						<view style="position: absolute;top: 50%; transform: translateY(-50%);">
							<view class="page-cont-top-board-item-text">步数</view>
							<view class="page-cont-top-board-item-num">322</view>
							<view class="page-cont-top-board-item-text">步</view>
						</view>
						<view class="arrow-d-right"><text class="image" :style="{'width':7*2+'px','height':7*2+'px'}"></text></view>
					</view>
					<view class="page-cont-top-board-item flex flex-a-center flex-j-center">
						<cmd-progress type="circle" :percent="8/ 20 * 100" stroke-color="#ffffff" :stroke-width="10" :width="140" :showInfo="false"></cmd-progress>
						<view style="position: absolute;top: 50%; transform: translateY(-50%);">
							<view class="page-cont-top-board-item-text">中高强度</view>
							<view class="page-cont-top-board-item-num">322</view>
							<view class="page-cont-top-board-item-text">分钟</view>
						</view>
					</view>
				</view>
				<view class="page-cont-top-list flex flex-a-center flex-j-center">
					<view class="page-cont-top-list-item">
						<view class="page-cont-top-list-item-text">距离</view>
						<view class="page-cont-top-list-item-num">2.28公里</view>
					</view>
					<view class="page-cont-top-list-item">
						<view class="page-cont-top-list-item-text">热量</view>
						<view class="page-cont-top-list-item-num">211千卡</view>
					</view>
					<view class="page-cont-top-list-item">
						<view class="page-cont-top-list-item-text">爬楼</view>
						<view class="page-cont-top-list-item-num">24.0米</view>
					</view>
				</view>
			</view>
			<view class="page-sportRecord">
				<view class="page-sportRecord-title">运动记录</view>
				<view class="page-sportRecord-time">2020/10/21引体向上</view>
				<view class="page-sportRecord-nums"><text class="page-sportRecord-nums-unit">36</text>千卡<text class="page-sportRecord-nums-time">00:10:05</text></view>
			</view>
			<view class="page-cate flex">
				<swiper class="page-cate-slide" display-multiple-items="3" indicator-dots>
					<swiper-item v-for="(item, index) in cateList" :key="index">
						<navigator :url="'/pages/jewel/health/chart?name='+item.name+'&type='+item.type" class="page-cate-slide-item flex">
							<view>
							<view class="page-cate-slide-item-name">{{item.name}}</view>
							<view class="page-cate-slide-item-date">{{item.date}}</view>
							</view>
							<view class="page-cate-slide-item-data" :class="item.class"><text class="page-cate-slide-item-data-unit">{{item.num}}</text>{{item.unit}}</view>
						</navigator>
					</swiper-item>
				</swiper>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				cateList: []
			};
		},
        methods: {
			
        },
        onLoad() {
			this.cateList = [
				{
					name:'睡眠',
					date:'10/20',
					num:6.4,
					unit:'小时',
					class:'c1',
					type:'sleep'
				},
				{
					name:'体温',
					date:'10/20',
					num:6.4,
					unit:'小时',
					class:'c2',
					type:'temperature'
				},
				{
					name:'心率',
					date:'10/20',
					num:6.4,
					unit:'小时',
					class:'c3',
					type:'heart'
				},
				{
					name:'血压',
					date:'10/20',
					num:6.4,
					unit:'小时',
					class:'c4',
					type:'blood'
				},
				{
					name:'血氧',
					date:'10/20',
					num:6.4,
					unit:'小时',
					class:'c5',
					type:'spo'
				}
			]
        }
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #f3f3f3 !important;
	}
	.flex{
		display: flex;
		&1{
			flex: 1;
		}
		&-a-center{
			align-items: center;
		}
		&-a-start{
			align-items: flex-start;
		}
		&-a-end{
			align-items: flex-end;
		}
		&-j-center{
			justify-content: center;
		}
		&-j-start{
			justify-content: flex-start;
		}
		&-j-end{
			justify-content: flex-end;
		}
	}
	
	.page{
		&-top{
			background-color: #FFFFFF;
			padding-left: 42rpx;
			margin-bottom: 30rpx;
			margin-top: 20rpx;
			&-head{
				height: 70rpx;
				width: 70rpx;
				display: block;
				margin-right: 20rpx;
			}
			&-text{
				font-size: 36rpx;
			}
		}
		.page-cont{
			margin: 0 26rpx;
			&-top{
				width: 695rpx;
				background-color: #0d8b13;
				border-radius: 10rpx;
				box-shadow: 0 10rpx 32rpx rgba($color: #0c8112, $alpha: 0.52);
				margin-bottom: 45rpx;
				&-title{
					font-size: 30rpx;
					color: #FFFFFF;
					text-align: center;
					padding-top: 30rpx;
					padding-bottom: 12rpx;
				}
				&-board{
					&-item{
						text-align: center;
						box-sizing: border-box;
						color: #FFFFFF;
						margin: 0 32rpx{
							bottom: 20rpx;
						};
						border-radius: 100px;
						position: relative;
						&-num{
							font-weight: bold;
							font-size: 50rpx;
						}
						&-text{
							font-size: 32rpx;
						}
						.arrow-d-right{
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: flex-start;
							transform:rotate(15deg);
							z-index: 10;
							.image{
								background-image:url('../../../static/images/jewel/health/arrow.png');
								background-size: 30%;
								background-repeat: no-repeat;
								background-position: center;
							}
						}
					}
				}
				&-list{
					background-color: rgba($color: #ffffff, $alpha: 0.15);
					text-align: center;
					padding: 17rpx 0;
					&-item{
						color: #FFFFFF;
						font-size: 30rpx;
						text-align: center;
						line-height: 36rpx;
						flex: 1;
					}
				}
			}
		}
		&-sportRecord{
			background-image: url(../../../static/images/jewel/health/sport_bg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: top center;
			width: 694rpx;
			height: 200rpx;
			margin: 0 auto;
			margin-bottom: 28rpx;
			padding-left: 34rpx;
			box-sizing: border-box;
			&-title{
				font-size: 36rpx;
				padding-top: 12rpx;
			}
			&-time{
				font-size: 28rpx;
				color: #7e7e7e;
			}
			&-nums{
				color: #0d8b13;
				font-size: 28rpx;
				margin-top: 20rpx;
				&-unit{
					font-size: 48rpx;
					font-weight: bold;
				}
				&-time{
					color: #7e7e7e;
					margin-left: 55rpx;
				}
			}
		}
		&-cate{
			height: 270rpx;
			&-slide{
				height: 270rpx;
				width: 100%;
				&-item{
					width: 214rpx;
					height: 188rpx;
					background-color: #f7f3f0;
					border-radius: 10rpx;
					flex-direction: column;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 16rpx 6rpx 6rpx 20rpx;
					&-name{
						font-size: 34rpx;
					}
					&-date{
						font-size: 24rpx;
						color: #808080;
						line-height: 28rpx;
					}
					&-data{
						font-size: 26rpx;
						&-unit{
							font-size: 46rpx;
							margin-right: 5rpx;
							font-weight: bold;
						}
						&.c1{
							color: #a731d8;
						}
						&.c2{
							color: #269731;
						}
						&.c3{
							color: #e8b722;
						}
						&.c4{
							color: #ee5b0b;
						}
						&.c5{
							color: #a731d8;
						}
					}
					
				}
			}
			
		}
	}
	/deep/ .cmd-progress-inner::after{border: 0;}
	
</style>
